/** @format */

import {
  Button,
  List,
  DatePicker,
  NavBar,
  Dialog,
  Toast,
  Popup
} from 'antd-mobile'
import classnames from 'classnames'
import styles from './Setting.module.scss'
import { useAppDispatch } from '@/store/hooks'
import {
  getProfileAsync,
  logoutAsync,
  patchProfileAsync
} from '@/store/slice/profile'
import { useLocation, useNavigate } from 'react-router-dom'
import useApiData from '@/hooks/useApiData'
import { useState } from 'react'
import SettingForm from './components/SettingForm'

const ProfileEdit = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const dispatch = useAppDispatch()
  const { profile } = useApiData(getProfileAsync, 'profile')
  const [visible, setVisible] = useState(false)
  const [showInput, setShowInput] = useState(true)
  // 退出
  const onLogout = () => {
    Dialog.confirm({
      title: '温馨提示',
      content: '要走了么?不爱了么?',
      onConfirm: async () => {
        await dispatch(logoutAsync()).unwrap
        Toast.show({ content: '退出成功' })
        navigate('/login', {
          state: {
            redirect: location.pathname
          }
        })
      },
      onCancel: () => {
        Toast.show({ content: '已取消' })
      }
    })
  }
  // 关闭
  const onClose = () => {
    setVisible(false)
  }

  // 提交昵称/简介
  const onSave = async (value: string) => {
    await dispatch(
      patchProfileAsync({
        ...profile,
        [showInput ? 'name' : 'intro']: value
      })
    ).unwrap()
    onClose()
  }
  return (
    <div className={styles.root}>
      <div className='content'>
        {/* 标题 */}
        <NavBar
          onBack={() => navigate(-1)}
          style={{
            '--border-bottom': '1px solid #F0F0F0'
          }}>
          个人信息
        </NavBar>

        <div className='wrapper'>
          {/* 列表 */}
          <List className='profile-list'>
            {/* 列表项 */}
            <List.Item
              extra={
                <span className='avatar-wrapper'>
                  <img
                    width={24}
                    height={24}
                    src={'http://toutiao.itheima.net/images/user_head.jpg'}
                    alt='avatar'
                  />
                </span>
              }
              arrow>
              头像
            </List.Item>
            <List.Item
              arrow
              extra={profile.name}
              onClick={() => {
                setVisible(true)
                setShowInput(true)
              }}>
              昵称
            </List.Item>
            <List.Item
              arrow
              onClick={() => {
                setVisible(true)
                setShowInput(false)
              }}
              extra={
                <span className={classnames('intro', 'normal')}>
                  {profile.intro ?? '未填写'}
                </span>
              }>
              简介
            </List.Item>
          </List>

          <List className='profile-list'>
            <List.Item
              arrow
              extra={profile.gender ? '女' : '男'}>
              性别
            </List.Item>
            <List.Item
              arrow
              extra={profile.birthday}>
              生日
            </List.Item>
          </List>

          <DatePicker
            visible={false}
            value={new Date(profile.birthday)}
            title='选择年月日'
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>

        <div className='logout'>
          <Button
            className='btn'
            onClick={onLogout}>
            退出登录
          </Button>
        </div>
      </div>

      <Popup
        visible={visible}
        position='right'
        bodyStyle={{ width: '100vw' }}>
        <SettingForm
          onClose={onClose}
          content={showInput ? profile.name! : profile.intro!}
          onSave={onSave}
          showInput={showInput}
          key={+showInput}
        />
      </Popup>
    </div>
  )
}

export default ProfileEdit
